<template>
  <div class="content">
    <!-- 头部 -->
    <Header></Header>
    <!-- 广告图片 -->
    <div class="banner">
      <image class="picture" src="../../static/tabs/banner.png" mode="scaleToFill" />
    </div>
    <!-- 我的服务 -->
    <MyServe></MyServe>
    <!-- 志愿活动 -->
    <MyActive></MyActive>
  </div>
</template>

<script>
import Header from "./components/Header.vue"
import MyServe from "./components/MyServe.vue"
import MyActive from "./components/MyActive"
export default {
  components: {
    Header,
    MyServe,
    MyActive
  },
  data() {
    return {}
  },
  onLoad() { },
  methods: {},
}
</script>

<style lang="scss">
.content {
  box-sizing: border-box;
  background-color: #eeeeee;
  margin-bottom: 8px;
  // padding: 0 15px;
  width: 100%;
  height: 100%;

  .banner {
    background-color: #fff;
    height: 170px;
    padding: 8px 20px;
    .picture {
      box-sizing: border-box;
      padding: 11px 5px 6px 22px;
      border-radius: 100px;
      width: 100%;
      height: 100%;
      background-color: #050505;
    }
  }
}
</style>
